 <template>
  <div class="ReservationForRenter component ui-user-center actWrap">
    <tab class="tab-container" :animate="false" active-color="#fff" :line-width="0">
      <tab-item :selected="tabIdx === 0" @on-item-click="onTapClick(0, 0)">预约成功</tab-item>
      <tab-item :selected="tabIdx === 1" @on-item-click="onTapClick(1, 1)">待确认</tab-item>
      <tab-item :selected="tabIdx === 2" @on-item-click="onTapClick(2, 4)">预约失败</tab-item>
    </tab>
    <nodata v-show="noData"></nodata>
    <div class="Li">
      <div class="Li-item" v-for="(item, index) in orderList" :key="index">
        <div class="Li-item-i">
          <div class="i">
            <h4 class="i-left">
              <span class="l-title">预约时间：</span>
              <span class="time">{{item.appointDate +' '+item.appointTime}}</span>
            </h4>
            <h4 class="i-status">
              <x-button v-if="item.status === 1 && tabIdx === 1" slot="BTaction" @click.native="cancel(item.id)" class="theme-bt bt-c" mini>取消预约</x-button>
              <span v-if="item.status === 1 && tabIdx === 2">已过期</span>
              <span v-if="item.status === 2 && tabIdx === 2">租客取消</span>
              <span v-if="item.status === 3 && tabIdx === 2">房东拒绝</span>
            </h4>
          </div>
        </div>
        <house-list v-if="item.housePersons" :houseInfo="item.housePersons"  twoLable="true" ></house-list>
      </div>
    </div>
    <div class="load-more" v-show="showMore" @click.native="loadMore">加载更多>></div>
  </div>
</template>
<script>
import houseList from '@/components/houseList'
export default {
  data () {
    return {
      tabIdx: 0,
      showMore: false,
      noData: false,
      orderList: [],
      page: 1,
      pageSize: 30
    }
  },
  components: {
    houseList
  },
  created () {
    let status = this.$route.query.status
    if (status && status === '1') {
      this.tabIdx = 1
      this.getData(1) // 待确认
    } else {
      this.getData(0) // 预约成功
    }
  },
  methods: {
    // 取消预约
    cancel (id) {
      let that = this
      let cancelReservation = () => {
        this.$axiosPosting(this.$api.cancelHouseAppointment, {
          appointId: id
        }).then(res => {
          if (res.code === '0000') {
            that.$vux.toast.text('取消预约房源成功')
            that.getData(1) // 刷新列表
          } else {
            that.$vux.toast.text('取消预约房源失败')
          }
        })
      }
      this.$vux.confirm.show({
        title: '取消预约',
        content: '您确认取消本次预约行程吗？',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm () {
          cancelReservation()
        }
      })
    },
    onTapClick (idx, status) {
      this.tabIdx = idx
      this.getData(status)
    },
    // status: 0-预约成功；1-待确认；2-租客取消；3-房东取消
    // 当 status 传 4 的时候返回 2 和 3 的数据，且包括超过预约时间房东未确认的数据
    getData (status) {
      this.$axiosPosting(this.$api.myReservationForRenter, {
        status,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === '0000') {
          if (res.data && res.data.length < 1) {
            this.noData = true
            this.orderList = []
          } else {
            this.orderList = res.data
            this.noData = false
          }
        } else {
          this.noData = true
          this.$vux.toast.text(res.msg)
        }
      })
    },
    statusTxt (status) {
      let txt = ''
      if (+status === 0) txt = '预约成功 '
      else if (+status === 1) txt = '预约中'
      else if (+status === 2) txt = '租客取消'
      else if (+status === 3) txt = '房东取消'
      else txt = '业主未同意'
      return txt
    },
    gosite (num) {
      this.$router.replace('/lookHouseSchedule?id=' + num)
    }
  }
}
</script>

<style lang="less" scoped>
  .ReservationForRenter{
    padding-top: 20px;
    .tab-container {
      height: 32px;
      margin: 0 15px 10px;
      border: .5px solid #d0d0d0;
      border-radius: 3px;
      overflow: hidden;
      .vux-tab-item {
        line-height: 32px;
        background-size: 1px 100%;
        &:first-child {
          background-size: 0 0;
        }
      }
      .vux-tab-selected {
        background: #ff9600;
      }
    }
    .Li{
      .bt-up {
        bottom: 40px;
        // padding-left: 0
        // padding-right: 0;
      }
      .Li-item:last-child{
        border-bottom: 0;
      }
      .Li-item{
        position: relative;
        // border-bottom: 0.3rem;
        border-bottom: 6px solid #f4f4f4;
        .bt-container{
          text-align: right;
          padding: 10px;
        }
        .Li-item-i{
          display: flex;
          padding: .5rem .75rem;
          font-size: 12px;
          align-items: center;
          /*border-bottom: 0.5px solid #f4f4f4;*/
          .time {
            font-size: 12px;
          }
          .i{
            /*padding: 10px 15px;*/
            display: flex;
            flex-wrap: wrap;
            .i-left{
              width: 100%;
              padding-right: .5rem;
              line-height: 1rem;
              .l-title {
                color: #999;
              }
            }
            .i-button {
              color: #989898;
              line-height: 24px;
              span:nth-of-type(2) {
                padding-left: 1rem;
              }
            }
          }
          .i-status{
            position: absolute;
            // top: 10px;
            font-size: 14px;
            right: 0.65rem;
            line-height: 18px;
            text-align: center;
            color:#ff9600;
            .bt-c {
              color: #ff9600;
              border-color: #ff9600;
            }
          }
        }
      }
    }
    .load-more {
      text-align: center;
      font-size: 15px;
      margin: 18px auto;
      color: #ff9600;

    }
    .btn-kfrc {
      background-color: #ff9600;
      color: white;
      border: 0;
    }
    .bt-up {
      background-color: #ff9600;
      color: white;
      bottom:40px;
      border: 0;
    }
    .label {
      span:nth-child(3) {
        display: none;
      }
      @media screen and (max-width: 350px) {
        span:nth-child(2) {
          display: none;
        }
      }
    }
  }
  .ui-house-li {
    border-bottom: 1px solid #f4f4f4;
    // padding-right: .9rem;
  }
  .ui-house-li {
    border-bottom: 1px solid #f4f4f4;
    // padding-right: .9rem;
  }
  body .ui-user-center .theme-bt{
    margin-top: 0;
    height: 28px;
    line-height: 28px;
    border-color: #ddd;
    color: #999;
  }
  body .ui-user-center .theme-bt.bt-blue{
    color: #ff9600;
    border-color: #ff9600;
    margin-left: 5px;
  }
</style>
